<div style="padding: 16px 20px;background: var(--el-bg-color);padding-top: 0;border: var(--el-border);border-radius: 12px;margin-top: 20px;">
    <div style="padding: 20px 0;text-align: center;">
        <el-text tag="b" size="large">底部导航</el-text>
    </div>
    <ul class="table_header">
        <li class="cell flex" style="min-width: 120px;">名称</li>
        <li class="cell" style="min-width: 200px;">数据来源</li>
        <li class="cell" style="min-width: 80px;text-align: center;">状态</li>
        <li class="cell" style="min-width: 230px;text-align: center;">操作</li>
    </ul>
    <el-tree 
        class="table-tree" 
        :data="treeData.bottom" 
        draggable
        default-expand-all
        node-key="id"
        :props="treeProp"
        @node-drop="TreeDrop">
        <template #default="{ node, data }">
            <div class="cell flex" style="padding-left: 0;min-width: 120px;">
                <div class="name">
                    <el-image 
                    style="min-width: 23px;width:23px; height: 23px;margin-right: 6px;border-radius: var(--el-border-radius-base);" 
                    :src="data.icon" 
                    fit="cover" >
                        <template #error><div class="el-image__placeholder"></div></template>
                    </el-image>
                    <el-text class="el-tree-node__label" truncated>{{ node.label }}</el-text>
                </div>
                <div class="btn">
                    <el-button 
                    plain
                    @click.stop="OperationTree('sibling',node,'bottom')"
                    icon="plus">添加同级</el-button>
                <el-button
                    plain
                    icon="plus"
                    @click.stop="OperationTree('child',node,'bottom')">添加子级</el-button>
                </div>
            </div>
            <div class="cell" style="min-width: 200px;">
                <el-text truncated>
                    <template v-if="data.btype == 0">
                        <el-icon style="font-size: 13px;">
                            <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M959.9972 831.9948c0 125.055218-233.59854 191.9988-451.709177 191.9988h8.127949a30.719808 30.719808 0 0 1-0.703995 0h-7.423954a30.719808 30.719808 0 0 1-0.639996 0h8.06395C297.53734 1023.9936 64.0028 957.050018 64.0028 831.9948V210.878682c0-59.775626 49.919688-113.66329 141.439116-151.551053C287.361404 25.791839 396.928719 6.847957 512 6.847957c216.318648 0 447.9972 71.423554 447.9972 204.030725l-0.064 0.639996z m-63.9996-198.526759c-84.415472 54.39966-239.614502 83.327479-387.709577 83.327479h8.191949-8.959944 8.191949c-148.095074 0-303.358104-28.927819-387.709577-83.327479V831.9948c0 62.911607 162.174986 130.751183 383.9976 131.519178 221.886613-0.767995 383.9976-68.671571 383.9976-131.519178z m-77.439516-270.974307c-83.19948 35.007781-191.422804 53.951663-306.558084 53.951663-146.559084 0-300.158124-32.831795-383.9976-95.679402l-0.064 231.038556c21.055868 53.951663 177.790889 109.055318 384.0616 109.695315 206.270711-0.639996 363.005731-55.679652 384.0616-109.631315l-0.128-232.318548a351.677802 351.677802 0 0 1-77.439516 42.943731zM512 69.503566c-221.886613 0-383.9976 74.367535-383.9976 141.439116 0 67.007581 162.110987 141.375116 383.9976 141.375116 220.990619 0 382.717608-73.023544 383.9976-139.839126v-0.831995-0.319998c0-66.751583-162.110987-141.823114-383.9976-141.823113z" ></path></svg>
                        </el-icon>
                        {{ data.soucresname }}
                    </template>
                    <template v-else-if="data.btype == 1">
                        <el-icon style="font-size: var(--el-font-size-medium);">
                            <svg viewBox="0 0 1041 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M511.500488 63.937561c33.104671 0 59.941463 26.836792 59.941463 59.941463 0 21.351149-11.163099 40.094845-27.971684 50.713476L543.469268 255.750244h287.719025c17.655758 0 31.96878 14.313022 31.96878 31.96878v575.438049c0 17.655758-14.313022 31.96878-31.96878 31.968781H191.812683c-17.655758 0-31.96878-14.313022-31.968781-31.968781V287.719024c0-17.655758 14.313022-31.96878 31.968781-31.96878h287.719024v-81.157744c-16.548839-10.452792-27.625022-28.781893-27.96469-49.721444L451.559024 123.879024c0-33.104671 26.836792-59.941463 59.941464-59.941463z m279.726829 263.742439H231.773659v495.516098h559.453658V327.68zM631.383415 672.343415a7.992195 7.992195 0 0 1 7.992195 7.992195v47.95317a7.992195 7.992195 0 0 1-7.992195 7.992196H391.617561a7.992195 7.992195 0 0 1-7.992195-7.992196v-47.95317a7.992195 7.992195 0 0 1 7.992195-7.992195h239.765854zM119.882927 399.609756a7.992195 7.992195 0 0 1 7.992195 7.992195v303.703415a7.992195 7.992195 0 0 1-7.992195 7.992195H71.929756a7.992195 7.992195 0 0 1-7.992195-7.992195V407.601951a7.992195 7.992195 0 0 1 7.992195-7.992195h47.953171z m831.188293 0a7.992195 7.992195 0 0 1 7.992195 7.992195v303.703415a7.992195 7.992195 0 0 1-7.992195 7.992195h-47.953171a7.992195 7.992195 0 0 1-7.992195-7.992195V407.601951a7.992195 7.992195 0 0 1 7.992195-7.992195h47.953171z m-607.40683 63.937561c30.897826 0 55.945366 25.04754 55.945366 55.945366s-25.04754 55.945366-55.945366 55.945366-55.945366-25.04754-55.945366-55.945366 25.04754-55.945366 55.945366-55.945366z m335.672195 0c30.897826 0 55.945366 25.04754 55.945366 55.945366s-25.04754 55.945366-55.945366 55.945366-55.945366-25.04754-55.945365-55.945366 25.04754-55.945366 55.945365-55.945366z" fill="currentColor"></path></svg>
                        </el-icon>
                        {{ data.soucresname }}
                    </template>
                    <template v-else-if="data.btype == 2">
                        <el-icon style="font-size: var(--el-font-size-medium);"><Tickets /></el-icon>
                        {{ data.soucresname }}
                    </template>
                    <template v-else-if="data.btype == 3">
                        <el-tooltip
                            effect="dark"
                            :content="data.soucresname"
                            placement="top">
                            <div>
                                <el-icon style="font-size: var(--el-font-size-medium);">
                                    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="M715.648 625.152 670.4 579.904l90.496-90.56c75.008-74.944 85.12-186.368 22.656-248.896-62.528-62.464-173.952-52.352-248.96 22.656L444.16 353.6l-45.248-45.248 90.496-90.496c100.032-99.968 251.968-110.08 339.456-22.656 87.488 87.488 77.312 239.424-22.656 339.456l-90.496 90.496zm-90.496 90.496-90.496 90.496C434.624 906.112 282.688 916.224 195.2 828.8c-87.488-87.488-77.312-239.424 22.656-339.456l90.496-90.496 45.248 45.248-90.496 90.56c-75.008 74.944-85.12 186.368-22.656 248.896 62.528 62.464 173.952 52.352 248.96-22.656l90.496-90.496 45.248 45.248zm0-362.048 45.248 45.248L398.848 670.4 353.6 625.152 625.152 353.6z"></path></svg>
                                </el-icon>
                                链接
                            </div>
                        </el-tooltip>
                    </template>
                    
                    
                </el-text>
                

            </div>
            <div @click.stop class="cell" style="min-width: 80px;text-align: center;">
                <el-switch
                    v-model="data.isshow"
                    active-value="1"
                    inactive-value="0"
                    @change="TreeStatus(data)"
                ></el-switch>
            </div>
            <div class="cell" style="min-width:230px;text-align: center;">
                <el-button 
                    icon="edit"
                    @click="OperationTree('edit',node,'bottom')">编辑</el-button>
                <el-popconfirm title="当前及当前子节点一并删除，确定删除？" @confirm="OperationTree('delete',node,'bottom')">
                    <template #reference>
                        <el-button
                            type="danger"
                            plain
                            icon="delete">删除</el-button>
                    </template>
                </el-popconfirm>
            </div>
            </template>
    </el-tree>
    <div class="el-table__append-wrapper">
        <el-button 
            style="width: 100%;border-radius: 0;height: 65px;font-size: 16px;" 
            plain 
            text 
            @click="OperationAddNew('bottom')" 
            icon="CirclePlus">添加</el-button>
    </div>
</div>
<!--{template components/index/tip}-->